<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>publish发布页面</title>
    <!--自己的样式-->
    <link rel="stylesheet" type="text/css" href="css/backstage.css">
    <!-- Bootstrap -->
    <!--fileinput 样式-->
    <link rel="stylesheet" type="text/css" href="css/fileinput.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--动画CSS插件-->
    <link rel="stylesheet" type="text/css" href="css/animate.min.css" th:href="@{/css/animate.min.css}">
    <script src="js/jquery-3.2.1.min.js" th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <script src="js/bootstrap.js" th:src="@{/js/bootstrap.js}"></script>
    <script src="js/fileinput.js" th:src="@{/js/fileinput.js}"></script>
    <script src="js/zh.js" th:src="@{/js/zh.js}"></script>
    <script src="js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
    <script src="js/respond.min.js" th:src="@{/js/respond.min.js}"></script>
</head>
<body>
<!--顶部-->
<div th:replace="~{common/common::top2}"></div>
<!-- /.container-fluid -->

<!--侧边-->
<div class="container-fluid">
    <div class="row ">
        <div th:replace="~{common/common::side}">
        </div>


        <!-- 显示表格数据 -->

        <div class=" col-md-8 publish wow fadeInUp" id="right"><!-- 将数据appendTo tbody 定义id -->
            <form class="form-horizontal" th:action="@{/addGoods}"
                  method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label class="col-sm-2">商品名称:</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="name" name="name">
                        <span class="help-block"></span></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2">商品价格:</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="price" name="price">
                        <span class="help-block"></span></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2">所属分类：</label>
                    <div class="col-md-4">
                    <select id="categorySel"  name="cid" class="form-control js_select2">
                        <option value>请选择</option>
                        <option th:each="category:${categoryList}" th:value="${category.getCid()}" th:text="${category.getCname()}"></option>
                    </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2">商品详情:</label>
                    <div class="col-sm-7">
                        <textarea rows="3" cols="70" id="gdesc" name="gdesc"></textarea>
                        <span class="help-block"></span></div>
                </div>
                <div class="form-group">
                    <div id="show">
                    </div>
                    <label for="InputFile">上传图片</label>
                    <input type="file" name="file" id="InputFile" multiple="multiple" onchange="getFile()"
                           accept="images/*"/>
                </div>
                <br/>
                <br/>
                <button type="submit" class="btn btn-primary  col-sm-2 col-md-offset-2" id="expaddbtn">发布</button>

                <button type="reset" class="btn btn-danger col-sm-2 " id="exp_delete_all_btn">重置</button>
            </form>
        </div>
    </div>
</div>
</div>
<script th:src="@{/js/wow.min.js}" src="js/wow.min.js"></script>
<script>
    $(function () {

        new WOW().init();
    })
</script>
<script>
    function getFile() {
        var file = document.querySelector("#InputFile").files;
        var str = "<div id='show'>";
        for (var i = 0; i < file.length; i++) {
            var src = window.URL.createObjectURL(file[i]);
            str += "<img src='" + src + "'style='width:100px;margin:10px'>"
        }
        str += "</div>";
        $("#show").replaceWith(str);
    }

</script>
</body>
</html>
